<template>
  <div>
    <el-dialog title="查看详情" :visible.sync="dialogTableVisible" width="100%" style="margin-bottom: 10px;">
      <el-table :data="gridData" style="font-size: small;">
        <el-table-column prop="id" label="编号:" align="center"></el-table-column>

        <el-table-column prop="name" label="值" align="center"></el-table-column>

        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>

        <el-table-column prop="createtime" label="创建时间" align="center"></el-table-column>

        <el-table-column prop="modifier" label="修改人" align="center"></el-table-column>

        <el-table-column prop="modififytime" label="修改时间" align="center"></el-table-column>

        <el-table-column prop="handler" label="操作" align="center" width="280px;">
          <template slot-scope="scope">
            <el-button size="mini" style="margin-right: 20px;" @click="editData(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="width: 100%; text-align: right; margin-top:20px;">
        <el-button size="mini" type="primary" style="margin: 20px;" @click="dialogTableVisible = false">关闭</el-button>
        <el-button type="success" size="mini" @click="addData()">新增</el-button>
      </div>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%;" border>
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="id" label="编号" align="center"></el-table-column>

      <el-table-column prop="name" label="名称" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>名称: {{ scope.row.name }}</p>
            <p>说明: {{ scope.row.content }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="content" label="说明" align="center"></el-table-column>

      <el-table-column
        prop="state"
        label="状态"
        align="center"
        :filters="[{ text: '有效', value: '有效' }, { text: '无效', value: '无效' }]"
        :filter-method="filterState"
        filter-placement="bottom-end"
      ></el-table-column>

      <el-table-column prop="handler" label="操作" align="center" width="280px;">
        <template slot-scope="scope">
          <el-button size="mini" @click="dialogTableVisible = true">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        name: '',
        state: ''
      },
      tableData: [],
      multipleSelection: [],

      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      search: '',
      form: {
        id: '',
        name: '',
        content: '',
        creator: '',
        createTime: ''
      },
      currentId: 0,
      formLabelWidth: '90px'
    };
  },
  created() {
  },
  methods: {
    selectGrid(id) {
      this.getRequest('/dd/getParentIdData/' + id)
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.gridData = successResponse.data.obj;
          } else this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        });
    },
    show(index, row) {
      this.dialogTableVisible = true;
      this.currentId = row.id;
      this.selectGrid(row.id);
    },
    deleteData(index, row) {
      this.$confirm('此操作将永久删除全部数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(({ value }) => {
          this.postRequest('/dd/delete', {
            id: row.id
          })
            .then(resp => {
              this.$message.success('删除成功！');
              this.selectGrid(this.currentId);
            })
            .catch(fail => {
              this.$message.error('网络不通畅');
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });
        });
    },
    addData() {
      this.$prompt('请输入值', '编辑信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.postRequest('/dd/add', {
            creator: this.$store.state.userInfo.name,
            name: value,
            parentid: this.currentId
          })
            .then(resp => {
              this.$message.success('添加成功！');
              this.selectGrid(this.currentId);
            })
            .catch(fail => {
              this.$message.error('网络不通畅');
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
    },
    editData(index, row) {
      this.$prompt('请输入值', '编辑信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.postRequest('/dd/edit', {
            modifier: this.$store.state.userInfo.name,
            name: value,
            id: row.id
          })
            .then(resp => {
              this.$message.success('编辑成功！');
              this.selectGrid(this.currentId);
            })
            .catch(fail => {
              this.$message.error('网络不通畅');
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
    },
    getTableData() {
      this.getRequest('/dd/get/统计数据管理')
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.tableData = successResponse.data.obj;
          } else this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleView(index, row) {
      console.log(index, row);
    },
    handleDeleteAll(index, row) {
      this.$confirm('此操作将永久删除全部数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    handleDelete(index, row) {
      /* console.log(index, row); */
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* resetDateFilter() {
			        this.$refs.filterTable.clearFilter('id');
			},
			clearFilter() {
			        this.$refs.filterTable.clearFilter();
			}, */
    /* formatter(row, column) {
			        return row.address;
			}, */
    filterId(value, row) {
      return row.id === value;
    },
    filterState(value, row) {
      return row.state === value;
    },
    filterName(value, row) {
      return row.name === value;
    }
    /* filterHandler(value, row, column) {
			        const state = column['state'];
			        return row[state] === value;
			} */
  }
};
</script>

<style></style>
